Common elements used in responsive design
響應式設計中使用的常見元素

1 漢堡選單（Hamburger Menu）

三個水平線條組成的圖示，形似漢堡。點選後展開完整的導航列表，可能從頁面邊緣滑入，或佔據整個螢幕。一般放在網頁左上角。移動端常用，適合隱藏大量導航連結，使主頁面保持整潔。

• 桌面：頂部水平導航欄

• 手機：漢堡選單內摺疊導航項

2 卡片（Cards）

矩形的內容塊，用於展示單一主題的資訊與互動動作。新聞縮圖、商品展示、使用者資料、Pinterest、交友應用等。緊湊、資訊集中，適合使用者快速瀏覽。

響應式佈局調整：如桌面上可顯示 4~5 列卡片，移動端可調整為 1~2 列。

3 輪播圖（Carousel / Slideshow）

可滑動（點選、滑動或自動播放）的影象或卡片集合。社交媒體、攝影網站、電商平臺等圖片密集型頁面。可將大量內容展示在首屏區域上，提高視覺吸引力。

• 桌面：展示多張圖片，可能佔據整屏。

• 移動端：每次只顯示一張，尺寸更緊湊（可能是正方形）。

4 行動呼籲按鈕（CTA：Call-To-Action）

引導使用者採取行動的按鈕，常見文字如 “立即註冊”、“加入購物車”。顏色突出、字型強調，便於識別。點選後可跳轉頁面或觸發某個行為。

• 移動端：按鈕通常更大，便於手指點選。

• 桌面端：可較緊湊，但要保持醒目性。

思考與應用

• 我的設計中是否需要隱藏導航？→ 使用漢堡選單。

• 是否有多個主題內容要展示？→ 使用卡片。

• 是否有視覺重點或圖片推薦？→ 使用輪播圖。

• 是否需要引導使用者點選行動？→ 使用 CTA 按鈕。